<template>
  <div class="miner-panel">
    <topheader></topheader>
    <div class="container">
      <div class="search-panel">
        <input class="accout-address" v-model="minerAddr" type="text" placeholder="账号地址" />
        <button class="search-btn phone-hide" @click="minerDetail" type="button">查看挖矿状态</button>
        <button class="search-btn pc-hide" @click="minerDetail" type="button"><i class="glyphicon glyphicon-search"></i></button>
      </div>
      <h2 class="miner-address">Miner: <span>{{minerInfo.addr}}</span></h2>
      <div class="miner-state-panel">
        <div class="miner-state-item text-center">
          <div class="panel panel-hr">
            <div class="panel-heading">
              <h3 class="panel-title">算力</h3></div>
            <div class="panel-body">
              <h4>
                <span data-toggle="tooltip" data-placement="top" title="" class="just_span" data-original-title="你的当前算力。">{{api.unitCover(minerInfo.detail.hr)}}</span>
              </h4>
            </div>
          </div>
        </div>
        <div class="miner-state-item text-center">
          <div class="panel panel-balance">
            <div class="panel-heading">
              <h3 class="panel-title">未支付的余额</h3></div>
            <div class="panel-body">
              <h4 class="pending-balance" data-toggle="tooltip" data-placement="top" title="未支付的余额">{{minerInfo.detail.unpaid}}</h4></div>
          </div>
        </div>
        <div class="miner-state-item text-center">
          <div class="panel panel-share">
            <div class="panel-heading">
              <h3 class="panel-title">24收益</h3></div>
            <div class="panel-body">
              <h4 class="24hours" data-toggle="tooltip" data-placement="top" title="" data-original-title="24小时已支付">{{minerInfo.detail.paid24h}}</h4></div>
          </div>
        </div>
        <div class="miner-state-item text-center">
          <div class="panel panel-ear">
            <div class="panel-heading">
              <h3 class="panel-title">总收益</h3></div>
            <div class="panel-body">
              <h4 class="allear" data-toggle="tooltip" data-placement="top" title="" data-original-title="24小时已支付">{{minerInfo.detail.allearned}}</h4></div>
          </div>
        </div>
        <div class="miner-state-item text-center">
          <div class="panel panel-work">
            <div class="panel-heading">
              <h3 class="panel-title">矿机数</h3></div>
            <div class="panel-body">
              <h4 class="active-work">
                <span data-toggle="tooltip" data-placement="top" title="矿机数">{{minerInfo.minersNum}}</span>
              </h4>
            </div>
          </div>
        </div>
      </div>
      <!--<div class="miner-types" role="tablist">
        <span v-bind:class="{active: (work_tab==1)}" style="cursor:pointer" @click="changeTab(1)">数据板</span>
        <b>/</b>
        <span v-bind:class="{active: (work_tab!=1)}" style="cursor:pointer" @click="changeTab(0)">矿池转账</span>
      </div>-->
      <!--<div id="setPanels" class="tab-content">
        <div role="tabpanel" class="tab-pane fade active in" id="dashboard" aria-labelledby="dashboard-tab">
          <h3 class="chart-title">算力<span class="chart-title-sub">(单位：MH)</span></h3>
          <div class="chart-item" id="hashrateChart"></div>
          <h3 class="chart-title none">算力份额</h3>
          <div class="chart-item none" id="shareChart"></div>
          <h3 class="chart-title">矿机</h3>
          <div class="chart-item" id="workersChart"></div>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="payouts" aria-labelledby="payouts-tab">
          <div id="payoutChart"></div>
        </div>
      </div>-->
    </div>
    <div class="container-fluid well works-tabel-panel" style="margin-top:20px;">
      <h4 class="work-total text-center">矿机列表</h4>
      <div class="container">
        <div class="tab-wrap">
          <el-tabs v-model="activeTab" @tab-click="handleTab">
            <el-tab-pane :label="'所有矿机('+allWorkers.length+')'" name="all"></el-tab-pane>
            <el-tab-pane :label="'在线矿机('+workersOnline.length+')'" name="online"></el-tab-pane>
            <el-tab-pane :label="'离线矿机('+workersOffline.length+')'" name="offline"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="tb-wrap">
          <el-table
            :data="showWorkersdata"
            v-loading="tbloading"
            style="width: 100%">
            <el-table-column
              prop="ID"
              sortable
              label="ID">
            </el-table-column>
            <el-table-column
              prop="accepted"
              sortable
              label="算力">
              <template slot-scope="scope">
                <span>{{api.unitCover(scope.row.accepted)}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="difficulty"
              sortable
              label="难度">
            </el-table-column>
            <el-table-column
              prop="rejectedpercent"
              sortable
              label="拒绝率">
              <template slot-scope="scope">
                <span>{{(scope.row.rejectedpercent)?(scope.row.rejectedpercent):(0)}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!--<div class="container-fluid well works-tabel-panel" v-show="work_tab">
      <h4 class="work-total text-center"><span class="online-btn" @click="showOnline()">在线&nbsp;(<span class="online-work">{{onlineNum}}</span> 矿机)</span> - <span class="offline-btn" @click="showOffline()">离线&nbsp;(<span class="offline-work">{{offlineNum}}</span> 矿机)</span></h4>
      <div class="workers-search form-inline">
        <div class="form-group">
          <span>搜索:</span>
          <input type="text" class="form-control" v-model="sWord" @input="searchWorkers()"/>
        </div>
      </div>
      <div class="container">
        <table id="workers" class="table table-condensed table-bordered text-center dataTable no-footer" role="grid">
          <thead>
            <tr role="row">
              <th class="text-center" rowspan="1" colspan="1">矿机</th>
              <th class="text-center" rowspan="1" colspan="1">当前算力</th>
              <th class="text-center" rowspan="1" colspan="1">平均算力</th>
              <th class="text-center" rowspan="1" colspan="1">最后一次提交</th>
            </tr>
          </thead>
          <tbody class="miners">
            <tr v-for="worker in sWorkers">
              <td>{{worker.name}}</td>
              <td>{{worker.hashrateString}}</td>
              <td>{{worker.hashrateAvg}}</td>
              <td>{{worker.lastSub}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>-->
    <!--<div class="container-fluid well payments-table-panel" v-show="!work_tab">
      <div class="container">
        <table class="table table-bordered phone-table">
          <thead>
            <tr>
              <th>转账时间</th>
              <th>转账ID</th>
              <th>付款金额</th>
            </tr>
          </thead>
          <tbody class="payments">
            <tr v-for="payment in paymentsList">
              <td class="text-center">{{payment.payTime}}</td>
              <td class="text-center">{{payment.payId}}</td>
              <td class="text-center">{{payment.payNum}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>-->
  </div>
</template>

<script>
    import topheader from '@/components/common/top_header.vue';
    let formatDate = function(dtime) {
        let timeStr = "";
        let t = new Date();
        t.setTime(dtime);
        timeStr += t.getFullYear();
        timeStr += "-";
        if(t.getMonth() < 9) {
            timeStr += ("0" + (t.getMonth() + 1));
        } else {
            timeStr += (t.getMonth() + 1);
        }
        timeStr += "-";
        timeStr += (t.getDate() < 10) ? ("0" + t.getDate()) : (t.getDate());
        timeStr += " ";
        timeStr += (t.getHours() < 10) ? ("0" + t.getHours()) : (t.getHours());
        timeStr += ":";
        timeStr += (t.getMinutes() < 10) ? ("0" + t.getMinutes()) : (t.getMinutes());
        timeStr += ":";
        timeStr += (t.getSeconds() < 10) ? ("0" + t.getSeconds()) : (t.getSeconds());
        return timeStr;
    }
    var sortData = function(arr, keyname) {
      var tempstr;
      var tempnum;
      var tempindex;
      arr.sort(function(x, y) {
        if(x[keyname] == y[keyname]) {
          return 0;
        }
        tempindex = x[keyname].search(/\d/);
        if((tempindex != (-1)) && (y[keyname].length > tempindex)) {
          if(x[keyname].substring(0, tempindex) == y[keyname].substring(0, tempindex)) {
            if(parseInt(x[keyname].substring(tempindex)) > parseInt(y[keyname].substring(tempindex))) {
              return 1;
            } else if(parseInt(x[keyname].substring(tempindex)) == parseInt(y[keyname].substring(tempindex))) {
              return (x[keyname] > y[keyname]) ? (1):(-1);
            } else {
              return (-1);
            }
          } else {
            return (x[keyname] > y[keyname]) ? (1):(-1);
          }
        } else {
          return (x[keyname] > y[keyname]) ? (1):(-1);
        }
      });
    }
    var mainwdata = [];
  export default {
    name: "miner",
    data() {
      return {
        minerAddr: "",
        sWord: "",
        onlineNum: "",
        offlineNum: "",
        work_tab: 1,
        tbloading: true,
        activeTab: "all",
        minerInfo: {
          addr: "",
          detail: {
            hr: "",
            balance: "",
            miners: []
          },
          minersNum: ""
        },
        workersdata: [],
        sWorkers: [],
        allWorkers: [],
        showWorkersdata: [],
        workersOnline: [],
        workersOffline: [],
        paymentsList: [],
        payInfo: "",
        lineTab: 0
      }
    },
    methods: {
      minerDetail() {
        this.$router.push({path: "/miner", query: {addr: this.minerAddr}});
        window.location.reload(true);
      },
      changeTab(tab) {
        this.work_tab = tab;
      },
      handleTab(tab) {
        if(tab.name == "all") {
          this.showWorkersdata = this.allWorkers;
        } else if(tab.name == "online") {
          this.showWorkersdata = this.workersOnline;
        } else {
          this.showWorkersdata = this.workersOffline;
        }
      },
      searchWorkers() {
        let that = this;
        let arr = [];
        let tempArr = [];
        let keyWord = $.trim(this.sWord);
        if(that.lineTab == 1) {
          tempArr = that.workersOnline;
        } else if(that.lineTab == 2) {
          tempArr = that.workersOffline;
        } else {
          tempArr = that.workersdata;
        }
        if(!keyWord) {
          that.sWorkers = tempArr;
          return;
        }
        for(var i = 0; i < tempArr.length; i ++) {
          if(tempArr[i].name.search(keyWord) !==(-1)) {
            arr.push(tempArr[i]);
          }
        }
        that.sWorkers = arr;
      },
      showOnline() {
        this.sWord = "";
        this.lineTab = 1;
        this.sWorkers = this.workersOnline;
      },
      showOffline() {
        this.sWord = "";
        this.lineTab = 2;
        this.sWorkers = this.workersOffline;
      },
      getHashrate() {
        let tempHash = 0;
        for(var i = 0; i < this.minerInfo.detail.miners.length; i ++) {
          tempHash += this.minerInfo.detail.miners[i].accepted;
        }
        this.minerInfo.detail.hr = tempHash;
      },
      init() {
        var that = this;
        var totalPaid = 0;
        this.api.get({
          url: "/minerDetail.shtml",
          data: {addr: that.minerInfo.addr},
          callback: function(data) {
            if (data.hasOwnProperty("error")) {
              return;
            }
            that.minerInfo.detail = data.minerInfo;
            that.minerInfo.minersNum = data.minerInfo.miners.length;
            that.minerInfo.detail.miners.sort(function(a, b) {
              return ((a.ID > b.ID)?(1):(-1));
            });
            for(var i = 0; i < that.minerInfo.detail.miners.length; i ++) {
              if(that.minerInfo.detail.miners[i].accepted > 0) {
                that.workersOnline.push(that.minerInfo.detail.miners[i]);
              } else {
                that.workersOffline.push(that.minerInfo.detail.miners[i]);
              }
            }
            that.allWorkers = that.minerInfo.detail.miners;
            that.showWorkersdata = that.allWorkers;
            that.getHashrate();
            that.tbloading = false;
            /*that.onlineNum = data.workerSum.online;
            that.offlineNum = data.workerSum.offline;
            for(var j in data.workerStats) {
              data.workerStats[j].name = j.split(".")[1];
              data.workerStats[j].lastSub = formatDate(parseInt(data.workerStats[j].lastBeat) * 1000);
              that.workersdata.push(data.workerStats[j]);
              if(data.workerStats[j].offline) {
                that.workersOffline.push(data.workerStats[j]);
              } else {
                that.workersOnline.push(data.workerStats[j]);
              }
            }
            that.sWorkers = that.workersdata;
            sortData(that.sWorkers, "name");
            sortData(that.workersOffline, "name");
            sortData(that.workersOnline, "name");*/
          }
        });
        /*this.api.get({
          url: "/pool_payments.shtml",
          data: {},
          callback: function(data) {
            if (data.hasOwnProperty("error")) {
              return;
            }
            var payData = data.datas;
            var minera = that.minerInfo.addr;
            var payTemp = [];
            if(!payData) return;
            for(var i = 0; i < payData.length; i ++) {
              for(var j in payData[i].amounts) {
                if(j == minera) {
                  payTemp.push({
                    payTime: formatDate(parseInt(payData[i].time)),
                    payId: payData[i].txid,
                    payNum: payData[i].amounts[j]
                  });
                  totalPaid += payData[i].amounts[j];
                }
              }
            }
            that.payInfo = totalPaid.toFixed(8);
            that.paymentsList = payTemp;
          }
        });*/
      }
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.minerInfo.addr = to.query.addr
        vm.init()
      })
    },
    components: {
      topheader
    }
  }
</script>

<style>
  .chart-item {
    width: 100%;
    height: 200px;
  }
  
  #payoutChart {
    width: 100%;
    height: 350px;
    margin-bottom: 50px;
  }
  
  #setNav {
    margin-bottom: 10px;
    border-bottom: none;
  }
  
  #setNav a {
    color: #008cba;
    border-radius: 0;
    border: none;
  }
  
  #setNav .active a {
    color: white;
    background-color: #008cba;
  }
  
  .miner-address {
    margin: 0 0 50px 0;
    padding-top: 50px;
    font: 24px "microsoft yahei";
    color: #333;
    word-break: break-all;
  }
  
  .miner-state-panel {
    margin: 0 -20px;
    display: flex;
  }
  
  .miner-state-item {
    margin: 0 20px;
    flex: 1;
  }
  
  .miner-state-item .panel-heading {
    padding: 10px 0;
    font: 18px "microsoft yahei";
    color: white;
  }
  
  .miner-state-item .panel-body h4 {
    height: 64px;
    margin: 0;
    font: 20px/64px "microsoft yahei";
    color: #333;
  }
  
  .miner-state-item .panel-heading,
  .miner-state-item .panel {
    border-radius: 0;
  }
  
  .panel-hr {
    border-color: #DFBC52;
  }
  
  .panel-hr .panel-heading {
    background-color: #DFBC52;
  }
  
  .panel-balance {
    border-color: #658EC1;
  }
  
  .panel-balance .panel-heading {
    background-color: #658EC1;
  }
  
  .panel-work {
    border-color: #EF8D59;
  }
  
  .panel-work .panel-heading {
    background-color: #EF8D59;
  }
  
  .panel-share {
    border-color: #489F8A;
  }
  
  .panel-share .panel-heading {
    background-color: #489F8A;
  }
  
  .panel-ear {
    border-color: #FF4949;
  }
  
  .panel-ear .panel-heading {
    background-color: #FF4949;
  }
  
  .miner-types {
    margin: 50px 0 30px 0;
    text-align: center;
    font: 24px "microsoft yahei";
    color: #666;
  }
  
  .miner-types a {
    display: inline-block;
    font: 24px "microsoft yahei";
    color: #666;
    text-decoration: none;
  }
  
  .miner-types b {
    margin: 0 5px;
  }
  
  .miner-types .active {
    color: #658EC1;
    border-bottom: 2px solid #658EC1;
  }
  
  .miner-types .active span {
    color: #EF8D59;
  }
  
  .chart-title {
    color: #333;
  }
  
  .chart-title-sub {
    margin-left: 5px;
    font-size: 16px;
    color: #666;
  }
  
  .works-tabel-panel,
  .payments-table-panel {
    padding-bottom: 80px;
    background-color: #FAFAFA;
  }
  
  .payments-table-panel {
    padding-top: 50px;
  }
  
  .works-tabel-panel th,
  .payments-table-panel th {
    height: 60px;
    text-align: center;
    vertical-align: middle !important;
    border-bottom-width: 0px !important;
  }
  
  .works-tabel-panel td,
  .payments-table-panel td {
    height: 50px;
    vertical-align: middle !important;
    word-break: break-all;
  }
  
  .works-tabel-panel th,
  .works-tabel-panel td,
  .payments-table-panel th,
  .payments-table-panel td {
    font: 20px "microsoft yahei";
  }
  
  .payments-table-panel th,
  .payments-table-panel td {
    font-size: 18px;
  }
  
  .works-tabel-panel td,
  .payments-table-panel td {
    color: #666;
  }
  
  .works-tabel-panel .dataTables_filter {
    font: 20px "microsoft yahei";
    color: #666;
  }
  
  .works-tabel-panel .dataTables_filter input {
    border-color: #E3E3E3;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  .work-total {
    font: 24px "microsoft yahei";
    color: #658EC1 !important;
  }
  .workers-search {
    float: right;
    margin: 10px 40px 10px;
  }
  .online-btn,
  .offline-btn {
    font: 24px "microsoft yahei";
    color: #658EC1 !important;
    text-decoration: none !important;
    cursor: pointer;
  }
  
  .online-btn:hover,
  .offline-btn:hover {
    border-bottom: 2px solid #658EC1;
  }
  
  @media only screen and (min-width: 100px) and (max-width: 420px) {
    .miner-state-panel {
      margin: 0 0px;
      display: block;
    }
    .miner-state-item {
      margin: 0 0px;
      flex: none;
    }
  }
  .el-table .cell {
    text-align: center;
  }
</style>
